<template>
  <div id="logo">
    <el-row>
      <el-col :span="4">
        <img width="60px" height="60px" src="../assets/logo.png" alt="logo" />
      </el-col>
      <el-col :span="16">进销存管理系统</el-col>
      <el-col :span="4">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-submenu index="2">
            <template slot="title">用户名</template>
            <el-menu-item index="2-1">个人信息</el-menu-item>
            <el-menu-item index="2-2">注册</el-menu-item>
            <el-menu-item index="2-3" @click="logout()">登出</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import baseUrl from "../../static/js/BaseUrl.js";
export default {
  name: "upHead",
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    logout() {
      var self = this;
      $.ajax({
        url: baseUrl.url + "/sys-user/logout",
        xhrFields: {
          withCredentials: true,
        },
        success: function (data) {
          console.log(data);
          self.$router.replace("/login");
          location.reload();
        }
      });
    },
  },
};
</script>

<style>
.el-menu-demo {
  width: 100%;
}
#logo {
  height: 60px;
}
</style>